<template>
    <view class="item dispaly-center" @click="clickItem">
        <view class="left">
            <image :src="props.data.image" mode="aspectFill" />
        </view>
        <view class="midlle">
            <view class="middle-top dispaly-center">
                <view class="m-icon">
                    <image src="/static/icon/ad.png" mode="aspectFill" />
                </view>
                <view class="name">{{ props.data.name }}</view>
            </view>
            <view class="middle-bottom dispaly-center">
                <view class="ad over-1" @click.stop="openMap">{{ props.data.address }}</view>
                <view class="b-icon dispaly-align-center">
                    <image src="/static/icon/r.png" mode="aspectFill" />
                </view>
            </view>
        </view>
        <view class="tel">
            <image src="/static/icon/call.png" mode="aspectFill" @click.stop="call" />
        </view>
    </view>
</template>

<script setup>
const props = defineProps({
    data: Object,
    type: {
        default: 1,
        type: Number
    }
})
// 选择
const clickItem = () => {
    if (props.type == 2) {
        uni.setStorageSync('serverItem', props.data)
        uni.navigateBack()
    }
}

// 拨打电话
const call = () => {
    uni.makePhoneCall({
        phoneNumber: props.data.phone,
        fail: (error) => {
            uni.showToast({
                title: '取消了拨号',
                icon: 'none'
            })
        }
    })
}

// 打开地图
const openMap = () => {
    uni.openLocation({
        latitude: Number(props.data.lat),
        longitude: Number(props.data.lon),
        name: props.data.name,
        address: props.data.address
    })
}
</script>
<style lang="scss" scoped>
.item {
    padding: 16rpx;
    margin-bottom: 24rpx;
    background: #FFFFFF;
    border-radius: 12rpx;

    .left {
        flex: 1;
        margin-right: 20rpx;

        image {
            width: 110rpx;
            height: 110rpx;
            border-radius: 10rpx;
        }
    }

    .tel {
        flex: 1;

        image {
            width: 46rpx;
            height: 46rpx;
        }
    }

    .midlle {
        flex: 5;

        .middle-top {
            .m-icon {
                margin-right: 10rpx;

                image {
                    width: 28rpx;
                    height: 36rpx;
                }
            }

            .name {
                font-family: PingFang-SC, PingFang-SC;
                font-weight: 500;
                font-size: 26rpx;
                color: #222222;
            }
        }

        .middle-bottom {
            margin-top: 20rpx;

            .ad {
                font-family: PingFang-SC, PingFang-SC;
                font-weight: 500;
                font-size: 24rpx;
                color: #415FFF;
                margin-left: 30rpx;
                margin-right: 10rpx;
            }

            .b-icon {
                image {
                    width: 12rpx;
                    height: 18rpx;
                }
            }
        }


    }
}
</style>